<template>
  <a-spin :spinning="confirmLoading">
    <template v-if="title === '标签管理'">
      <a-tag :color="tag.color" v-for="(tag, index) in tags" :key="tag.name" closable @close="() => handleClose(tag)">{{ tag.name }}</a-tag>
      <span class="tag-panel">
        <a-input
          v-if="inputVisible"
          ref="input"
          type="text"
          size="small"
          :style="{ width: '78px' }"
          :value="inputValue"
          @change="handleInputChange"
          @blur="handleInputConfirm"
          @keyup.enter="handleInputConfirm"
        />
        <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
          <a-icon type="plus" /> 标签
        </a-tag>
        <a-card class="color-panel" v-if="isShow">
          <a-card-grid v-for="(color, index) in colorList" :key="index">
            <div :style="{ background: color }" @click="handleColor(color)"></div>
          </a-card-grid>
        </a-card>
      </span>
    </template>
    <template v-if="title === '查看元素图'">
      <div class="element-img">
        <span v-for="(item, index) in model.elementImageList" :key="index">
          <img :src="item.imageUrl" @click="handleImg(item.imageUrl)">
          <p>{{ item.imageUrl && item.imageUrl.split('/') && item.imageUrl.split('/').pop() && item.imageUrl.split('/').pop().slice(-10)}}</p>
        </span>
      </div>
    </template>
  </a-spin>
</template>

<script>
  import { postAction, getAction, deleteAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  export default {
    name: 'ProductLibraryElementTagForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      title: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        model: {},
        confirmLoading: false,
        tags: [],
        inputVisible: false,
        inputValue: '',
        isShow: false,
        colorList: [
          '#cf0606',
          '#cf6e06',
          '#d6337d',
          '#ff7a7a',
          '#764df8',
          '#9a7aff',
          '#e17aff',
          '#ffca65',
          '#bfdc31',
          '#6bc859',
          '#388bdd',
          '#7bbdff',
          '#56baff',
          '#97c69a',
          '#7682c1',
        ],
        url: {
          list: "/hzkj-product/product/productLibrary/elementTag/list",
          add: "/hzkj-product/product/productLibrary/elementTag/add",
          edit: "/hzkj-product/product/productLibrary/elementTag/edit",
          queryById: "/hzkj-product/product/productLibrary/elementTag/queryById",
          delete: "/hzkj-product/product/productLibrary/elementTag/delete",
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
        if(this.title === '标签管理'){
          this.getElementTagList();
        }
      },
      handleClose(removedTag) {
        deleteAction(this.url.delete, { id: removedTag.id }).then((res) => {
          if(res.success){
            this.$message.success(res.message);
            const tags = this.tags.filter(tag => tag.name != removedTag.name);
            this.tags = tags;
            this.$emit('ok');
          }else{
            this.$message.warning(res.message);
          }
        })
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(function() {
          this.$refs.input.focus();
        });
      },

      handleInputChange(e) {
        this.inputValue = e.target.value;
      },

      handleInputConfirm() {
        this.isShow = true;
      },
      handleColor(color){
        this.isShow = false;
        if(!this.inputValue){
          this.$message.warning('请输入标签名称！');
          return;
        }
        let flag = this.tags.some(item => item.name === this.inputValue);
        if(flag){
          this.$message.warning('标签名称已存在！');
          return;
        }
        const inputValue = this.inputValue;
        let params = {
          name: inputValue,
          color
        }
        postAction(this.url.add, params).then((res) => {
          if(res.success){
            let tags = this.tags;
            if (inputValue && tags.indexOf(inputValue) === -1) {
              tags = [...tags, {
                name: inputValue,
                color
              }];
            }
            Object.assign(this, {
              tags,
              inputVisible: false,
              inputValue: ''
            });
            this.getElementTagList();
            this.$emit('ok');
          }else{
            this.$message.warning(res.message);
          }
        })
      },
      getElementTagList(){
        getAction(this.url.list).then((res) => {
          if(res.success){
            this.tags = (res.result && res.result.records) || [];
          }else{
            this.$message.warning(res.message);
          }
        })
      },
      handleImg(src){
        if(src){
          this.$viewerApi({images: [src]});
        }
      },
    }
  }
</script>

<style lang="less" scoped>
.tag-panel{
  position: relative;
  .color-panel{
    position: absolute;
    left: 0;
    top: 30px;
    width: 200px;
    border-radius: 4px;
    overflow: hidden;
    .ant-card-grid{
      width: 25%;
      aspect-ratio: 1;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      &>div{
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }
    }
  }
}
.ant-tag{
  padding: 5px 10px;
  margin-bottom: 8px;
}
.ant-input{
  height: 32px;
}
.element-img{
  display: flex;
  flex-wrap: wrap;
  &>span{
    margin-right: 8px;
  }
  &>span:nth-child(8n - 1){
    margin-right: 0;
  }
  img{
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
  }
  p{
    text-align: center;
    font-size: 12px;
    margin-top: 2px;
    width: 100px;
  }
}
</style>